<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>随机图片</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .btn_list {
        width: 100vw;
        height: 90px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      button {
        height: 30px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 0 10px;
        border-radius: 4px;
      }
      .img_box {
        width: 100vw;
        height: calc(100vh - 100px);
      }
      .image {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <div class="btn_list">
      <button onclick="changeTag(0)" id="fj">风景</button>
      <button onclick="changeTag(1)" id="tb">淘宝买家秀</button>
      <button onclick="changeTag(2)" id="ecy">二次元</button>
      <button onclick="changeTag(3)" id="sp">竖屏</button>
      <button onclick="changeTag(4)" id="hp">横屏</button>
    </div>
    <div class="img_box">
      <img src="https://api.vvhan.com/api/view" class="image" id="image" alt="image" />
    </div>
    <script>
      const image = document.getElementById('image')
      const TB = document.getElementById('tb')
      const FJ = document.getElementById('fj')
      const ECY = document.getElementById('ecy')
      const SP = document.getElementById('sp')
      const HP = document.getElementById('hp')
      let tag = 0
      const changeTag = val => {
        tag = val
        getImage()
      }
      const getImage = () => {
        const time = new Date().getTime()
        if (tag === 0) {
          image.src = `https://api.vvhan.com/api/view?time=${time}`
          changeStyleHandler(FJ)
        } else if (tag === 1) {
          image.src = `https://api.vvhan.com/api/tao?time=${time}`
          changeStyleHandler(TB)
        } else if (tag === 2) {
          image.src = `https://api.vvhan.com/api/acgimg?time=${time}`
          changeStyleHandler(ECY)
        } else if (tag === 3) {
          image.src = `https://api.vvhan.com/api/mobil.girl?time=${time}`
          changeStyleHandler(SP)
        } else if (tag === 4) {
          image.src = `https://api.vvhan.com/api/girl?time=${time}`
          changeStyleHandler(HP)
        }
      }
      image.addEventListener('click', () => {
        getImage()
      })
      const changeStyleHandler = DOM => {
        DOM.style.backgroundColor = '#409eff'
        DOM.style.color = '#fff'
        const siblings = Array.from(DOM.parentNode.childNodes).filter(
          node => node.nodeType === 1 && node !== DOM
        )
        siblings.forEach(node => {
          node.style.backgroundColor = '#fff'
          node.style.color = '#000'
        })
      }
      changeStyleHandler(FJ)
    </script>
  </body>
</html>
